<template>
    <div class="flex gap-2">
      <el-tag :type="tagType" effect="dark">{{ statusText }}</el-tag>
    </div>
  </template>
  
  <script lang="ts">
  import { ref, computed } from 'vue'
  
  export default {
    props: {
      status: {
        // 状态: pending, ongoing, finished
        type: String,
        default: 'pending'
      }
    },
    setup(props) {
      const statusText = computed(() => {
        switch (props.status) {
          case 'pending':
            return '未开始'
          case 'ongoing':
            return '正在进行'
          case 'finished':
            return '已结束'
          default:
            return '未知状态'
        }
      })
  
      const tagType = computed(() => {
        switch (props.status) {
          case 'pending':
            return 'info'
          case 'ongoing':
            return 'success'
          case 'finished':
            return 'danger'
          default:
            return ''
        }
      })
  
      return { statusText, tagType }
    }
  }
  </script>
  
  <style scoped>

</style>
  